<template>
	<div class="user-layout-wrapper" id="userLayout">

		<div class="container">
			<div class="main">
				<a-row :gutter="{xs:8,sm:8,md:16,lg:16}">
					<a-col :xs="0" :sm="0" :md="12" :lg="12">
						<img width="400px" height="400px" src="../../assets/image/login_banner.png" alt="">
					</a-col>
					<a-col :xs="24" :sm="24" :md="12" :lg="12">
						<div class="login-box">
						<a-card>
								<template>
									<div slot="title">
										社会服务个案管理系统平台登陆
									</div>
								</template>
								<a-form
										id="formLogin"
										class="user-layout-login"
										ref="formLogin"
										:form="form"
										v-if="tab==0"
								>
									<div class="mb-1x">
									<a-form-item>
										<a-input
												type="text"
												placeholder="请输入用户名"
												v-decorator="[
					        'username',
					        {rules: [{ required: true, message: '请输入用户名' }], validateTrigger: 'change'}
					      ]"
										>
											<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
										</a-input>
									</a-form-item>

									<a-form-item>
										<a-input

												type="password"
												autocomplete="false"
												placeholder="请输入密码"
												v-decorator="[
					        'password',
					        {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
					      ]"
										>
											<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
										</a-input>
									</a-form-item>

									<a-row :gutter="16" v-if="num==3">
										<a-col class="gutter-row" :span="16">
											<a-form-item>
												<a-input
														type="text"
														placeholder="验证码"
														v-decorator="[
					            'captcha',
					            {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}
					          ]"
												>
													<a-icon slot="prefix" type="key" :style="{ color: 'rgba(0,0,0,.25)' }"/>
												</a-input>
											</a-form-item>
										</a-col>
										<a-col class="gutter-row" :span="8">
											<!-- :src="`${baseURL}/auth/captcha?p=${captchaParam}`" -->
											<img
													@click="++captchaParam"
													alt="验证码"
													style="height: 40px; cursor: pointer;">
										</a-col>
									</a-row>
									</div>
									<div class="text-right">
										<a-button size="small" type="link" class="normal" @click="fogotpwd">忘记密码?</a-button>
									</div>
									<a-form-item>
										<!-- htmlType="submit" -->
										<a-button
												type="primary"
												class="login-button"
												@click="handleSubmit"
										>确定</a-button>
									</a-form-item>
								</a-form>
								<div  v-if="tab==1">
									<p>欢迎回来，<strong>{{userInfo.nickName}}</strong>.<br/>请选择您要登录的账号:</p>
									<div class="mb-2x">
									<div class="isc-row mb-1x role-item row-left row-top" v-for="(item,index) in userInfo.roles" @click="toHome(item)" :key="index" @mouseover="infoPop(item)">
										<a-badge class="avatar" :count="item.sort"><a-avatar :size="48" icon="user"/></a-badge>
										<div class="user-info">
											<div class="user-name">{{item.name}}</div>
											<div class="tenant-name">{{userInfo.tenantName}}</div>
										</div>
										<div class="model" v-show="isShow==item">
											<div class="model-item" @click="toDetail">某某服务档案待审核</div>
											<div class="model-item" @click="toDetail">某某事件待处理</div>
										</div>
									</div></div>
								</div>
							</a-card>
						</div>
					</a-col>
				</a-row>
			</div>
		</div>
	</div>
</template>

<script>
	import {login} from '../../api/login.js'
	export default {
		data() {
			return {
				tab:0,
				num:0,
				form: this.$form.createForm(this),
				userInfo:{},
				user:['督导','社工','机构管理员'],
				isShow:'',
			}
		},
		mounted() {
			// 黄麒宇
			// 进入页面自动判断用户是否已经登录，如果已登录则强制跳转回Dashboard页面
			let user = localStorage.getItem('Authorization');
			let roleid = localStorage.getItem('roleId');
			// 需要与后端通讯加入权限是否真实的判断
			console.log(user,roleid)
			if(user && roleid)
				this.$router.push({ path: '/index'});
		},
		methods: {
			handleSubmit(){
				this.form.validateFields((err,value) => {
					if (!err) {
						this.num++;
						login(value).then(res => {
						    if(res.code==200){
									setTimeout(() => {
									  this.$notification.success({
									    message: '欢迎',
									    description: `${res.data.userInfo.nickName}，欢迎回来`
									  })
									}, 1000)
									this.tab=1;
									this.userInfo = res.data.userInfo;
									localStorage.setItem('Authorization',res.data.tokenHead+res.data.token)
									// zxp 添加 暂时将用户信息存入localStorage里
									localStorage.setItem("user",JSON.stringify(this.userInfo))
									this.$c.vuex('vuex_user',this.userInfo)
									console.log(this.vuex_user);
								}else{
								}
						  }).catch(err => {
						  })
					}
				});
				// if(this.num>3){
				// 	 this.$message.success('登陆成功')
				// 	 this.tab=1;
				// }else{
				// 	 this.$message.error(`还差${3-this.num}次成功`)
				// }
			},
			infoPop(item){
				this.isShow=item;
			},
			fogotpwd(){
				// this.$router.push({path:'/home'});
			},
			toDetail(){
				 this.$message.info({
					 content:'跳转到对应页面'
				 })
			},
			toHome(item){
				// zxp添加将将角色id存入localStorage,方便判断用户角色
				localStorage.setItem('roleId',item.id);
				// ,query:{data:JSON.stringify(item)} 
				this.$router.push({ path: '/index'});
			},
		},
	}
</script>

<style lang="scss">
	.user-layout-wrapper {
		height: 100%;
	}
	#app .user-layout-wrapper .container {
		width:100%;
		padding:80px 0;
		min-height: 100%;
		background-color:#f2f2f2;
		position: relative;
	}
	.user-layout-wrapper .container .main {
		min-width: 260px;
		width:100%;
		margin:0 auto;
		padding-bottom:200px;
		background: #f2f2f2 url("../../assets/image/login_background.png") no-repeat bottom center;
		background-size:100%;
	}

	.user-layout-wrapper .container .main .login-box {
		width:100%;
		padding:0 16px;
	}
	.user-layout-wrapper .container .main .login-box .role-item {
		position: relative;
		border-bottom:1px solid #ccc;
		margin-left:60px;
		height:48px;
	}
	.user-layout-wrapper .container .main .login-box .role-item .avatar {
		position: absolute;
		left:-60px;
		top:0;
		width: 48px;
		height:48px;
	}
	.user-layout-wrapper .container .main .login-box .role-item .user-info {
	}
	.user-layout-wrapper .container .main .login-box .role-item .user-name{
		font-size: 16px;
		font-weight: 800;
		line-height: 24px;
		height:24px;
	}
	.user-layout-wrapper .container .main .login-box .role-item .tenant-name {
		font-size: 14px;
		color: #999;
		line-height: 24px;
		height: 24px;
	}
	.user-layout-wrapper .container .main .login-box .model {
		position:absolute;
		left:-198px;
		width: 130px;
		background: #ccc;
		top:0;
	}
	// Small devices (landscape phones, 576px and up)
	@media (min-width: 576px) {
	}

	// Medium devices (tablets, 768px and up)
	@media (min-width: 768px) {
		#app .user-layout-wrapper .container {
			padding:130px 0;
		}
	}

	// Large devices (desktops, 992px and up)
	@media (min-width: 992px) {
		#app .user-layout-wrapper .container {
			padding:130px 0;
		}
	}

	// Extra large devices (large desktops, 1200px and up)
	@media (min-width: 1200px) {
		#app .user-layout-wrapper .container {
			padding:130px 0;
		}
		.user-layout-wrapper .container .main {
			width: 1180px;
		}
		.user-layout-wrapper .container .main .login-box {
			margin-top:30px;
			max-width: 400px;
		}
	}

</style>
